<template>
  <div class="page">
    <div class="flex">
      <img v-if="userInfo.avatarUrl" class="avatar" mode="widthFix" :src="userInfo.avatarUrl">
      <img v-else class="avatar" mode="widthFix" src="../../assets/avatar.png">
      <div class="ml-5">
        <div class="fs-18">{{ userInfo.nickName }}</div>
        <div class="fs-12 color-gray">ID:{{ userInfo.userSerialNo }}</div>
      </div>
      <div class="flex flex-right" @click="toAccount()">
        <span class="fs-12">账号与安全</span>
        <span class="p-icon-arrow" />
      </div>
    </div>
    <div class="card mt-2">
      <div class="flex">
        <div class="fs-14 b">我托管的微信号</div>
        <u class="color-gray flex-right fs-12" @click="logoutWx()">注销</u>
      </div>
      <div class="flex h-center mt-2">
        <div class="relative">
          <img v-if="robot.robotWxId" class="robotAvatar" mode="widthFix" :src="robot.headImgUrl">
          <img v-else class="robotAvatar" mode="widthFix" src="../../assets/avatar.png">
          <div v-if="robot.robotWxId && robot.state === 0" class="live_out flex h-center">
            已离线
          </div>
        </div>

        <div class="b ml-2">{{ robot.nickName }}</div>
      </div>
      <div class="fs-10 color-gray mt-2">
        本产品所提供的所有功能均以登陆您的个微号为基础，为确保您正常使用系统功能。请先登陆您的个微号。
      </div>
    </div>
    <div class="card mt-2">
      <div class="flex">
        <div class="fs-14 b">托管功能配置</div>
        <img src="../../assets/icon_right.png" class="icon_right flex-right">
      </div>
      <div class="flex mt-4">
        <div class="flex column flex-1" @click="toWelcom()">
          <img src="../../assets/logo_welcome.png" class="icon_logo">
          <div class="fs-12 mt-1 color-gray b">入群欢迎语</div>
        </div>
        <div class="flex column flex-1" @click="toKeywords()">
          <img src="../../assets/logo_key.png" class="icon_logo">
          <div class="fs-12 mt-1 color-gray b">关键词回复</div>
        </div>
        <div class="flex column flex-1" @click="todayPushGoods()">
          <img src="../../assets/logo_push.png" class="icon_logo">
          <div class="fs-12 mt-1 color-gray b">今日推品</div>
        </div>
      </div>
    </div>
    <div class="card mt-2">
      <div class="flex">
        <div class="fs-14 b">我托管的群</div>
        <div v-if="groupList.length > 0">（{{ groupList.length }}）</div>
        <button
          v-if="groupList.length > 0"
          class="btn small flex-right"
          @click="toOpenGroup()"
        >
          添加群
        </button>
      </div>
      <div
        v-if="groupList.length === 0"
        class="flex h-center column mt-2"
        @click="toOpenGroup()"
      >
        <img src="../../assets/no/no_group.png" class="no_group">
        <button class="btn mt-2">立即托管</button>
      </div>
      <div v-if="groupList.length > 0" class="group_box">
        <div v-for="item in groupList" :key="item.chatroomId" class="item flex">
          <img :src="item.groupHead" class="gAvatar mr-2">
          <div class="flex mt-3 flex-1 border-bottom">
            <div class="flex-1">
              <div class="fs-14 b">{{ item.groupName }}</div>
              <div class="p2 flex">
                <span v-if="item.pushState === 1" class="mr-2 color-danger">播货中</span>
                <span v-else class="mr-2 color-gray">未播货</span>
                <van-switch v-model="item.checked" size="18px" @click="itemChange(item)" />
              </div>
            </div>
            <div class="pl-2" @click="deleteGroup(item)">
              <img src="../../assets/icon_delete.png" class="icon_delete">
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-overlay :show="logoutDialog" bind:click="onClickHide">
      <div class="popupRemind">
        <div class="popup_remind_txt">
          <span>微信号注销后，微信相关的设置</span>
          <span
            class="color-danger"
          >（入群欢迎语、群发、关键词回复、新客户应答、关键词进群、防骚扰、加群用户为好友）</span>
          <span>将会清除，确定注销？</span>
        </div>
        <div class="bottom_btn flex">
          <div
            class="bottom_btn_cancel flex h-center"
            @click="ensureLogout(false)"
          >
            取消
          </div>
          <div
            class="bottom_btn_ensure flex h-center"
            @click="ensureLogout(true)"
          >
            确定
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { Switch } from 'vant'

export default {
  name: 'Index',
  data() {
    return {
      loading: false,
      robot: {
        nickName: '宫姣栋'
      },
      pageIndex: 1,
      pageSize: 1000,
      groupList: [],
      show: false,
      logoutDialog: false,

      checked: true,
      wxType: 1
    }
  },
  created() {
    const _this = this
    _this.initData()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    async initData() {
      const _this = this
      await _this.getData()
      _this.getGroup()
    },
    getData() {
      const _this = this
      return new Promise((resolve, reject) => {
        _this.$post('/WxRobot/GetPorts', { wxType: _this.wxType })
          .then((res) => {
            _this.robot = res[0]
            _this.$store.dispatch('setRobotInfo', _this.robot)
            if (!_this.robot.robotWxId) {
              _this.$router.replace('/')
            }
            resolve()
          }).catch(() => {
            reject()
          })
      })
    },
    getGroup() {
      const _this = this
      _this.$post('/WxRobot/QueryChatrooms', {
        pageIndex: _this.pageIndex,
        pageSize: _this.pageSize,
        sortName: '',
        sortOrder: 0,
        robotWxIds: [_this.robot.robotWxId],
        likeName: '',
        openState: 2,
        openType: 3
      })
        .then((res) => {
          _this.groupList = res.dataList
          _this.groupList.map(item => {
            item.checked = item.pushState === 1
          })
        })
    },
    toAccount() {
      const _this = this
      if(_this.robot.status == '0'){
        _this.$router.push('/login/index')
      }else{
        _this.$Toast("您是在线的，无需重复登录");
      }
      
    },
    toOpenGroup() {
      const _this = this
      _this.$router.push('/group/openGroup')
    },
    toWelcom() {
      const _this = this
      _this.$router.push('/welcomeWords')
    },
    toKeywords() {
      const _this = this
      _this.$router.push('/keywords')
    },
    todayPushGoods() {
      const _this = this
      _this.$router.push('/todayPushGoods')
    },
    logoutWx() {
      const _this = this
      _this.logoutDialog = true
    },
    onClickHide() {},
    async ensureLogout(value) {
      const _this = this
      if (value) {
        await _this.$post('/WxRobot/WxRobotLogout', {
          robotWxId: _this.robot.robotWxId,
          deviceId: _this.robot.deviceId,
          wxType: 0,
          reason: [
            {
              reasonType: 1,
              reasonData: '默认'
            }
          ]
        })
          .then((res) => {})
        _this.$router.replace('/')
      }
      _this.logoutDialog = false
    },
    itemChange(item) {
      const _this = this
      item.pushState = item.pushState === 1 ? 0 : 1
      _this.$post('/PushProduct/ChatRoomPushSetState', {
        pushSetId: item.pushSetId,
        pushState: item.pushState,
        robotWxId: item.robotWxId,
        chatroomId: item.chatroomId
      }).then((res) => {
        _this.$Toast('切换成功')
      })
    },
    async deleteGroup(item) {
      const _this = this
      await _this.$post('/WxRobot/CloseChatrooms', [{
        chatroomId: item.chatroomId,
        robotWxId: item.robotWxId
      }]).then((res) => {
        _this.$Toast('移除成功')
      })
      _this.getGroup()
    }
  }
}
</script>

<style scoped lang="scss">
@import "index";
</style>
